<template>
  <div class="code-editor">
    <textarea ref="textarea" v-model="contentValue"></textarea>
  </div>

</template>

<script setup>
import {computed, markRaw, nextTick, onMounted, reactive, ref} from 'vue'
import CodeMirror from "codemirror";
import 'codemirror/lib/codemirror.css'
//主题
import 'codemirror/theme/idea.css'
import 'codemirror/theme/darcula.css'
import 'codemirror/theme/night.css'
import 'codemirror/theme/shadowfox.css'

//功能
import 'codemirror/addon/selection/active-line'

//语言
import 'codemirror/mode/javascript/javascript'
import 'codemirror/mode/sql/sql'
import 'codemirror/mode/python/python.js'
import 'codemirror/mode/shell/shell'

// 代码提示功能 具体语言可以从 codemirror/addon/hint/ 下引入多个
import 'codemirror/addon/hint/show-hint.css'
import 'codemirror/addon/hint/show-hint'


// 高亮行功能
import 'codemirror/addon/selection/active-line'
import 'codemirror/addon/selection/selection-pointer'

// 全屏功能 由于项目复杂，自带的全屏功能一般不好使
import 'codemirror/addon/display/fullscreen.css'

import 'codemirror/addon/hint/javascript-hint.js'

import {useGlobalStore} from "@/stores/modules/global.js";

const globalStore = useGlobalStore();
const isDark = computed(() => globalStore.isDark);

// const handleShowHint =()=> {
  // const cur = this.editor.getCursor();	// 获取当前最新输入
  // const curLine = this.editor.getLine(cur.line);	// 获取当前所在行数
  // const end = cur.ch;	// 获取最新输入结束位置
  // const start = end - 1;	// 设置检测输入的起始位置（本案例中只检测最新输入的一个字符）
  // const word = curLine.charAt(start);	// 获取最新输入的内容（本案例中为最新输入的一个字符）
  // // list为筛选出的自动提示项的数组
  // const list = this.paramsData.filter(param => {
  //   return param.indexOf(word) > -1;
  // });
  //
  // return {
  //   hint: function() {
  //     return {
  //       from: CodeMirror.Pos(cur.line, start),	// 需要自动替换的起始位置（本案例中为最新输入的一个字符的位置）
  //       to: CodeMirror.Pos(cur.line, end),	// 需要自动替换的终止位置（本案例中为当前输入最末端）
  //       list,	// 由自动提示项组成的数组
  //     }
  //   }
  // };
// }


const hint = (editor, callback) => {
  // //获取CodeMirror上面的一个方法
  // const Pos = editor.Pos;
  // 获取光标位置
  // const cur = editor.getCursor();
  // // 获取当前单词的信息
  // const token = editor.getTokenAt(cur);
  // console.log(token)
  // //用来放提示的单词
  // let found = [];
  // //当前正在输入的单词 通过它判断提示是啥
  // const currentStr = token.string;
  // //一个简单的示例 输入if后提示数组中的
  // if (currentStr === "if") {
  //   found = ["if (  ) {}", "other..."];
  // }
  //
  // const result = {
  //   list: found,
  //   // from: Pos(cur.line,token.start),
  //   // to: Pos(cur.line, token.end),
  //   // async:true,
  //   // supportsSelection:true
  // };
  // callback(result);
};
hint.async = true;
hint.supportsSelection = true;

const contentValue = ref("console.log()899")

const props = defineProps({
  modelValue:{
    type:Object
  },
  mode:{
    type:String
  }
})

onMounted(()=>{
  contentValue.value = props.modelValue.string
})

const opt = reactive({
  theme: isDark ? "shadowfox" : "idea",	//主题
  autoRefresh: true,
  // autofocus:true,
  lineNumbers: true,	//行号
  lineWrapping: false,	//自动换行
  tabSize: 4,	//Tab缩进
  indentUnit: 4,	//缩进单位
  indentWithTabs: true,	//自动缩进
  mode: props.mode,

  styleActiveLine: true,// 高亮行功能
  matchBrackets: true,           // 匹配括号

  gutters: ["CodeMirror-lint-markers"],
  lint: true,                     // 代码出错提醒
  hintOptions:{
    completeSingle: false, // 当匹配只有一项的时候是否自动补全
    // hint: hint,
  }
})

const textarea = ref()
const coder = ref()

const init = () => {
  nextTick(() => {
    coder.value = CodeMirror.fromTextArea(textarea.value, opt)
    console.log(coder.value)
    coder.value.on("change", (coder) => {
      // 获取输入文本
      // console.log(coder.getValue())

      // contentValue.value = coder.getValue()
      props.modelValue.string = coder.getValue()
    })
    // coder.value.on('cursorActivity', (coder) => {
    //   // if (this.editor.getValue() != this.editorData.content) {
    //   //   this.editor.showHint(this.handleShowHint());	// 传入处理自动提示的函数
    //   // }
    //   console.log(coder)
    //   console.log("yo dong")
    // })

    // coder.value.on("keypress", (coder) => {
    //   //编译器内容更改事件
    //   // coder.showHint();
    // });
  })
}

onMounted(() => {
  init()
})


</script>

<style lang="scss">
.code-editor {
  font-size: 14px;
  border: 1px solid var(--el-border-color-light);
  line-height: 150%;
  width: 100%;
  height: 100%;
}

.code-editor:deep(.CodeMirror) {
  height: 100%;
}
.cm-s-shadowfox.CodeMirror {
  height: 100%;
}
</style>
